<template>
    <div>
        <button @click="sendGet">发送get请求</button>
        <button @click="sendPost">发送post请求</button>
        <button @click="sendDelete">发送delete请求</button>
        <button @click="sendPut">发送put请求</button>
        <button @click="sendProxy">配置代理发送跨域请求</button>
        <hr>

        <button @click="sendSimple">使用async、await简化Promise用法</button>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            users: [],
            user: {
                name: '汤小洋',
                phone: '13888888888',
                address: '南京'
            }
        }
    },
    methods: {
        sendGet(){
            /**
             * 获取所有用户
             */
            // axios.get('http://ums.tangxiaoyang.vip/api/users/list')
            //     .then(res => {
            //         // console.log(res.data)
            //         if(res.data.status === 200){
            //             this.users = res.data.data
            //             console.log(this.users)
            //         }else{
            //             console.log(res.data.msg)
            //         }
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     })

            /**
             * 根据id查询用户
             */
            // 通过url传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/findById?id=12811')
            //     .then(res => {
            //         console.log(res.data.data)
            //     })

            // 通过params选项传参
            // axios.get('http://ums.tangxiaoyang.vip/api/users/findById', {
            //     params: {
            //         id: 12811
            //     }
            // })
            //     .then(res => {
            //         console.log(res.data.data)
            //     })

            // Rest风格传参
            axios.get('http://ums.tangxiaoyang.vip/api/users/query/12811')
                .then(res => {
                    console.log(res.data.data)
                })

        },
        sendPost(){
            axios.post('http://ums.tangxiaoyang.vip/api/users/add', this.user)
                .then(res => {
                    console.log(res)
                    if(res.data.status === 200){
                        alert('添加成功')
                    }
                })
        },
        sendDelete(){
            // 根据id删除
            // var id = 12800
            // axios.delete('http://ums.tangxiaoyang.vip/api/users/remove/' + id)
            //     .then(res => {
            //         if(res.data.status === 200){
            //             alert('删除成功')
            //         }
            //     })

            // 批量删除
            var ids = [12811, 12813]
            axios.delete('http://ums.tangxiaoyang.vip/api/users/removeBatch', {
                data: ids
            }).then(res => {
                console.log(res.data)
            })
        },
        sendPut(){
            // 修改用户
            this.$http.put('/users/modify', {
                id: 12815,
                name: '笑文',
                phone: '13612345678',
                address: '上海'
            }).then(res => {
                if(res.data.status === 200){
                    alert('修改成功')
                }else{
                    alert('修改失败')

                }
            })
        },
        sendProxy(){
            this.$http.get('/users/list')
                .then(res => {
                    console.log(res.data)
                })
        },
        async sendSimple(){
            // 异步请求
            // this.$http.get('/users/list').then(res => {
            //     this.users = res.data.data
            // })

            // 使用async、await，将异步请求 转换为 同步请求
            var {data: res} = await this.$http.get('/users/list')
            this.users = res.data
            
            console.log(111)
            console.log(this.users)
        }
    }
}
</script>

<style>

</style>